<template>
	<view class="content">
		<view class="card-containe">
			<view class="card-content">
				<!-- 月卡 -->
				<view class="charge">
					<view class="">
						<u--text text="充电月卡-有效期1个月" color="#fff" size="30rpx"></u--text>
					</view>
					<view class="">
						<u--text text="每月限制300小时" color="#f5f5f5" size="20rpx"></u--text>
						<u--text text="安全、便携充电" color="#f5f5f5" size="15rpx"></u--text>
					</view>

				</view>
				<!-- 余额 -->
				<view class="amount">
					<u-grid col="2">
						<u-grid-item v-for="(item,index) in cardInfo" :key="index">
							<view :class="['card',{cardChecked:cardIndex === index?true:''}]"
								@click="handleIndex(index)">
								<u--text bold="true" :text="item.time" size="20rpx"></u--text>
								<view class="flex" style="margin-top:30rpx;">
									<text style="font-size: 50rpx; font-weight: 600;">{{item.money}}</text>
									<text style="font-size: 20rpx;font-weight: 600;margin-top: 30rpx;">元</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>

			</view>
			<!-- 购卡须知 -->
			<view class="instructions">
				<u--text text="购卡须知" size="25rpx" bold="true"></u--text>
				<view class="instructions-info">
					1.您即将购买的是 <text style="color: #dc7073;">闽南科技学院（康美校区）</text>的包月，<text style="color: #dc7073;">
						一旦购买，无法退款，请仔细确认！</text>
				</view>
				<view class="instructions-info">
					2.购买包月的用户，包月为过期无法再次购买。
				</view>
				<view class="instructions-info">
					3.包月订单未结束之前，包月无法再次使用，但可使用余额进行充电。
				</view>
				<view class="instructions-info">
					4.每月限制300小时，当月时长用完可以使用余额充电。
				</view>
			</view>
		</view>
		<view class="buy">
			<u--text margin="20rpx" bold="true" size="50rpx" :text="cardInfo[cardIndex].money + '元' "></u--text>
			<button class="buy-btn" @click="handlebuy">购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardInfo: [{
						time: "1个月-300小时",
						money: "30"
					},
					{
						time: "3个月-900小时",
						money: "90"
					},
					{
						time: "6个月-1800小时",
						money: "180"
					},
					{
						time: "12个月-3600小时",
						money: "360"
					}
				],
				cardIndex: 0
			}
		},
		methods: {
			handleIndex(index) {
				this.cardIndex = index
			},
			handlebuy(){
				uni.showToast({
					
					icon:"success",
					title:"购买成功！"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
height: 100vh;
		box-sizing: border-box;
		background-color: #f6f6f6;

		.card-containe {
			// height: calc(100vh - 110rpx);
			box-sizing: border-box;

			// 选择充值内容
			.card-content {

				margin-bottom: 20rpx;
				padding: 30rpx;
				background-color: #fff;
				box-sizing: border-box;

				// 月卡
				.charge {
					width: 100%;
					height: 200rpx;
					padding: 20rpx 50rpx 20rpx;
					background-color: #20bd24;
					border-radius: 30rpx;
					box-sizing: border-box;
					box-shadow: 0 0 10rpx #61bd45;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin: 40rpx 0;

				}

				// 卡片
				.amount {
					padding-bottom: 20rpx;

					.card {
						width: 330rpx;
						height: 150rpx;
						padding: 15rpx 30rpx;
						border: 4rpx solid #f1f1f1;
						border-radius: 10rpx;
						box-sizing: border-box;
						margin: 10rpx;
					}

					.cardChecked {
						background-color: #f2ffeb;
						border: 4rpx solid #d0eab3;
					}
				}
			}

			// 购买须知
			.instructions {

				margin-bottom: 20rpx;
				padding: 30rpx 30rpx 50rpx;
				background-color: #fff;
				box-sizing: border-box;

				.instructions-info {
					color: #c8c8c8;
					font-size: 25rpx;
					margin-top: 10rpx;
				}
			}
		}


		// 购买
		.buy {
			
			display: flex;
			box-sizing: border-box;
			background-color: #fff;
			.buy-btn{
				width: 300rpx;
				background-color: #02ba28;
				text-align: center;
				color: #fff;
				border-radius: 0;

			}
		}

		.flex {
			display: flex;
			justify-content: flex-start;
			align-content: flex-start;
		}
	}
</style>